<template>
	<div id="subhome-3d-swiper" style="width: 100%;">
		<div class="swiper-container-3d">
		  <div class="swiper-wrapper">
			  <!---->
		    <div class="swiper-slide" style="width:4.8rem;border-radius: .2rem; overflow: hidden;box-shadow: 0 0 1rem #c8c8c8"   @click="goNewDetail(v.pro_id,v.id_type)" v-for="(v,k) in imgArr">
				<div class="wrap-prd" >
					<img :src="v.pro_thumb" >
					<p style="-webkit-box-orient: vertical;">{{v.pro_title}}</p>
					<p><span>￥</span>{{v.market_price}}</p>
					<button :id="v.pro_id" :id_type="v.id_type"></button>
				</div>
				<img v-if="v.stock_has===0" src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/change/WechatIMG146.png" style="position:absolute;top: 17%;left:27%;width: 1.8rem;height:1.8rem;">
		    </div>
		  </div>
		</div>
	</div>
</template>

<script>
    import config from "../../config/config.js";
	export default{
	    data(){
	      return {
              noHave:false
		  }
		},
		props:{
            imgArr:[]
		},
		methods:{
	        getShareid($event){
                var id=$event.currentTarget.getAttribute('id'),
                    type=$event.currentTarget.getAttribute('id_type');
                var value=JSON.stringify({"sku_id":id,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/cut/PushCut',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
						if(response.data.code==200){
						    this.goThreekan(response.data.data.shareid)
						}
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
            // goThreekan(shareid){
             //    this.$router.push('/threekan/'+shareid);
			// },
			goNewDetail(id,type){
				this.$router.push('/newDetail/'+id+'/'+type)
			}
		},
		mounted(){
	        //3d轮播
            setTimeout(()=>{
				var mySwiper = new Swiper('.swiper-container-3d', {
					effect: 'coverflow',
					slidesPerView: 2,
					centeredSlides: true,
					coverflow: {
					  rotate: 0,
					  stretch: -35,
					  depth: 300,
					  modifier: 2,
					  slideShadows : false,
					},
					observer:true,
					observeParents:true,
                     loop:true,
                    // loopAdditionalSlides:5,
                    // autoplay: 1000,
                    // autoplayDisableOnInteraction: false,
                })

			},500);

		}
    }
</script>

<style>
</style>